<template>
  <div class="sidebar-box" :class="{'showMenu':showMenu}">
    <div class="sidebar-content">
      <div class="blog-info">
        <a v-link="{path:'/'}" class="blog-logo">
    			<img src="/resources/webSite/images/userImg.jpg">
    		</a>
    		<h1 class="my-name">{{headerData.name}}</h1>
    		<p>{{headerData.profiles}}</p>
      </div>
      <!--播放器-->
      <player></player>
    </div>
  </div>
</template>
<script>
  var player = require("./player.vue");
  export default{
		data(){
			return {
				headerData:""
			}
		},
    props:["showMenu"],
		created(){
			var data = "",
				th = this;
			//设置信息
			this.$http.get("/webSettings" , function(res){
				th.headerData = res.data;
				var img = document.getElementById("img");
			},"JSON");
		},
    components:{
      player:player
    }
	};
</script>
<style scoped>
  /*侧边栏*/
  .sidebar-box{
    width:250px;
    height:100%;
    padding:0 20px;
    background:#55bef9;
    position:fixed;
    top:0;
    right:0;
    box-shadow:0px 0px 25px #999;
    -webkit-transition:transform 0.3s ease;
    -moz-transition:transform 0.3s ease;
    -ms-transition:transform 0.3s ease;
    transition:transform 0.3s ease;
    -webkit-transform:translate3d(105% , 0 , 0);
    -moz-transform:translate3d(105% , 0 , 0);
    -ms-transform:translate3d(105% , 0 , 0);
    transform:translate3d(105% , 0 , 0);
    z-index:6;
  }
  .sidebar-box .sidebar-content{
    width:100%;
    height:582px;
    position:relative;
    top:50%;
    margin-top:-291px;
  }
  .showMenu{
    -webkit-transform:translate3d(0 , 0 , 0);
    -moz-transform:translate3d(0 , 0 , 0);
    -ms-transform:translate3d(0 , 0 , 0);
    transform:translate3d(0 , 0 , 0);
  }
  /*信息*/
  .blog-info{
    text-align:center;
    color:#fff;
  }
  .blog-info .blog-logo{
    display:block;
    width:120px;
    height:120px;
    border:2px solid #fff;
    box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius:50%;
    overflow:hidden;
    margin:0 auto;
  }
  .blog-info .my-name{
    font-size:30px;
    margin:15px 0;
  }
  .blog-info p{
    font-size:14px;
    margin:0 auto;
  }
</style>
